<template>
  <div class="like-container">
    <div class="like-title">
      <img src="~img/home-like/heart.png" alt>
      <span>猜你喜欢</span>
    </div>
    <ul class="like-list">
      <li class="like-item border-bottom" v-for="item in likeList" :key="item.id">
        <div class="like-img">
          <img :src="item.imgUrl" alt>
        </div>
        <div class="like-desc">
          <p class="like-name">{{item.name}}</p>
          <p class="like-review">{{item.review}}条评论</p>
          <p class="like-bottom">
            <span class="like-price">
              ￥
              <span class="num">{{item.price}}</span>起
            </span>
            <span class="like-addr">{{item.location}}</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["likeList"],
  data() {
    return {};
  },
  methods: {}
};
</script>
<style lang="stylus" scoped>
.like-container
  background #ffffff
  margin-top 0.2rem

.like-item
  overflow hidden
  padding 0.2rem 0

.like-title
  line-height 0.44rem
  font-size 0.32rem
  padding 0.2rem

  img
    height 0.3rem
    width 0.3rem
    vertical-align top

.like-list
  padding-left 0.24rem
  background-color #fff

.like-item
  position relative
  overflow hidden

.like-img
  height 2rem
  width 2rem
  float left

  img
    height 100%
    width 100%

.like-desc
  overflow hidden
  font-size 0.28rem
  padding-left 0.2rem

.like-name
  margin-top 0.28rem
  font-size 0.32rem

.like-review
  margin-top 0.14rem
  font-size 0.24rem
  color #616161

.like-bottom
  margin-top 0.6rem
  position relative

.like-price
  color #ff8300

  .num
    margin-left -0.1rem
    font-size 0.36rem

.like-addr
  position absolute
  right 0.1rem
  bottom 0
  color #616161

.border-bottom:before
  content ' '
  position absolute
  left 0
  bottom 0
  width 100%
  height 1px
  border-bottom solid 1px #e0e0e0
</style>


